<script>
import {ref, watch,onMounted } from "vue";
import {getCenterList, getPurchaseCenterById, praisePurchaseCenter} from "@/js/pickupApi";
import {message} from "ant-design-vue";


export default {
  setup() {
    const customTaskList = ref([]);
    const orderDetails = ref({
      orderNo: null,
      orderPrice: null,
      buyOnBehalf: null,
      itemPicture: null,
      purchaseAddress: null,
      addressForService: null,
      hits: 0,
      praiseLen: 0,
      contactPerson: null,
      contactNumber: null,
      isPraise:0
    });

    const search = ref('');
    const token = ref('');
    const currentRowKey = ref('');

    const page = ref({
      pageSize:10,
      pageNum:1,
      totalPage:0,
      totalCount:0
    });

    const handleEdit = (index, row) => {
      console.log(index, row)
    };

    const handleDelete = (index, row) => {
      console.log(index, row)
    };

    const getCustomTaskList = async() =>{
      try{
        let res = await getCenterList(token.value, page.value.pageSize, page.value.pageNum, 2, search.value);
        if (res.data.success){
            customTaskList.value = res.data.data.data;
            page.value.totalCount = res.data.data.totalCount;
            page.value.totalPage = res.data.data.totalPage;
            if(customTaskList.value.length>0){
              currentRowKey.value = customTaskList.value[0].agencyBuyingCenterId;
            }

        }
      }catch (err){
        message.error("获取任务列表失败！" + err);
      }
    }

    const getOrderDetail = async() =>{
      try{
        let res = await getPurchaseCenterById(token.value, currentRowKey.value);
        if (res.data.success){
          orderDetails.value = res.data.data;
        }
      }catch (err){
        message.error("获取订单详情失败！" + err);
      }
    }

    const likeOrCancelLike = async() =>{
      try{
        let res = await praisePurchaseCenter(token.value, currentRowKey.value);
        if (res.data.success){
          await getOrderDetail();
          // message.success("点赞成功！");
        }
      }catch (err){
        message.error("获取订单详情失败！" + err);
      }
    }

    const handlePageChange = async (newPage) => {
      page.value.pageNum = newPage;
      await getCustomTaskList();
    };

    const handleRowClick = (row)=> {
      currentRowKey.value = row.agencyBuyingCenterId;
    };

    watch(search, () => {
      getCustomTaskList();
    });

    watch(currentRowKey, () => {
      getOrderDetail();
    });

    onMounted(() => {
      token.value = localStorage.getItem('token');
      getCustomTaskList();
    });

    return {
      customTaskList,
      search,
      token,
      page,
      currentRowKey,
      orderDetails,
      handleEdit,
      handleDelete,
      getCustomTaskList,
      handlePageChange,
      handleRowClick,
      getOrderDetail,
      likeOrCancelLike
    };
  }
};
</script>

<template>
  <div class="appearing-container">
      <div class="appearing-container">
          <div class="tmp1">
            <div style="display: flex;width: 100%;margin-bottom: 30px;">
              <h1 class="no-wrap">任务列表</h1>
              <div style="width: 65%"></div>
              <el-input v-model="search" style="float: right"></el-input>
            </div>

            <el-table :data="customTaskList" style="width: 100%"
                      :current-row-key="currentRowKey"
                      @row-click="handleRowClick">
              <el-table-column label="编号" prop="orderNo" width="160"/>
              <el-table-column label="价格" prop="orderPrice" width="60" />
              <el-table-column label="物品名称" prop="buyOnBehalf" />
              <el-table-column label="图片" prop="itemPicture" >
                <template #default="scope">
                  <img :src="scope.row.itemPicture" v-if="scope.row.itemPicture" alt="物品图片" style="width: 50px; height: 50px;">
                  <span v-else>暂无图片</span>
                </template>
              </el-table-column>
              <el-table-column label="起始地址" prop="purchaseAddress" />
              <el-table-column label="送达地址" prop="addressForService" />
<!--              <el-table-column label="点击数" prop="hits" />-->
<!--              <el-table-column label="点赞数" prop="praiseLen" />-->
            </el-table>
            <div style="margin-left: auto;margin-top: 20px">
              <el-pagination
                  small
                  background
                  layout="prev, pager, next"
                  :total="page.totalCount"
                  :page-count="page.totalPage"
                  :current-page="page.pageNum"
                  :page-size="page.pageSize"
                  class="mt-4"
                  @current-change="handlePageChange"
              />
            </div>

          </div>

          <div class="tmp2">

              <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>订单详情</span>
                  <el-button class="button" type="primary">更改任务</el-button>
                </div>
              </template>
                <div class="scrollable" style="width: 100%;height: 100%">
                <div class="order-info">
                  <div class="order-item">
                    <span class="label">订单编号:</span>
                    <span>{{ orderDetails.orderNo }}</span>
                  </div>
                  <div class="order-item">
                    <span class="label">订单价格:</span>
                    <span>{{ orderDetails.orderPrice }}</span>
                  </div>
                  <div class="order-item">
                    <span class="label">起始地址:</span>
                    <span>{{ orderDetails.purchaseAddress }}</span>
                  </div>
                  <div class="order-item">
                    <span class="label">送达地址:</span>
                    <span>{{ orderDetails.addressForService }}</span>
                  </div>
                </div>

                <div class="title">物品信息</div>

                <div class="item-info">
                  <div class="item-item">
                    <span class="label">物品:</span>
                    <span>{{ orderDetails.buyOnBehalf }}</span>
                  </div>
                  <div class="item-item">
                    <p class="label">物品图片:</p>
                    <el-image v-if="orderDetails.itemPicture" style="width: 300px; height: 300px" :src="orderDetails.itemPicture" fit="scale-down" />
                    <span v-else>暂无图片</span>
                  </div>
                  <!-- 其他物品信息项 -->
                </div>

                <div class="title">联系信息</div>

                <div class="contact-info">
                  <div class="contact-item">
                    <span class="label">联系者姓名:</span>
                    <span>{{ orderDetails.contactPerson }}</span>
                  </div>
                  <div class="contact-item">
                    <span class="label">联系者电话:</span>
                    <span>{{ orderDetails.contactNumber }}</span>
                  </div>
                  <!-- 其他联系信息项 -->


                 </div>
                </div>

              <template #footer>
                <div style="display: flex;align-items:center;justify-content:space-around">
                  <div class="other-info">
                    <span class="label">点击数:</span>
                    <span>{{ orderDetails.hits }}</span>
                  </div>
                  <div class="other-info">
                    <div class="no-wrap">
                      <img src="@/assets/like_0.png"
                           style="width: 15px;height: 15px;margin-right: 15px"
                           @click="likeOrCancelLike"
                           v-if="orderDetails.isPraise === 0" />
                      <img src="@/assets/like_1.png"
                           style="width: 15px;height: 15px;margin-right: 15px"
                           @click="likeOrCancelLike"
                           v-else/>
                      <span>{{ orderDetails.praiseLen }}</span>
                    </div>

                  </div>
                </div>

              </template>
            </el-card>
      </div>
      </div>
  </div>
</template>

<style scoped>
.tmp1{
    position: absolute;
    left: 5%;
    right: 45%;
    bottom: 5%;
    top: 5%;
    background: lightsteelblue;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2%;
}

.tmp2{
    position: absolute;
    left: 60%;
    right: 5%;
    bottom: 5%;
    top: 5%;
    background: lightsteelblue;
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1%;
}

.my-btn{
    position: absolute;
    height: 32px;
    width: 80px;
    left: 8px;
    bottom: 9px;
}

.no-wrap {
  white-space: nowrap;
}
.title{
  margin-bottom: 25px;
  margin-top: 25px;
  font-weight:bold;
}

.label {
  /*font-weight: bold;*/

  margin-right: 15px;
  margin-bottom: 15px;
}

.order-info,
.item-info,
.contact-info {
  margin-bottom: 20px;
}

.order-item,
.item-item,
.contact-item {
  margin-bottom: 20px;
}

.box-card{
  width: 100%;
  border-radius: 5px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scrollable{
  overflow: auto; /* 自动开启滚动条 */
  max-height: 400px; /* 设置最大高度 */
}

</style>
